<template>
	<div class='wy-main matching-tendering wei_tendering'>
		<div class="list_tab">
			<h2>注册信息</h2>
			<a-form :form="form" @submit="handleSubmit" class="wy-form">
				<a-form-item v-bind="formItemLayout" label="登录名">
					<a-input :disabled="disabled" v-decorator="[ 'username']" placeholder='请输入登录名' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="移动电话">
					<a-input :disabled="disabled" v-decorator="[ 'mobile']" placeholder='请输入移动电话' />
				</a-form-item>
				<a-divider class="title-divider" />
				<h2>认证信息</h2>
				<a-form-item v-bind="formItemLayout" label="真实姓名">
					<a-input :disabled="disabled" v-decorator="[ 'nickName']" placeholder='请输入真实姓名' />
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="证件类型">
					<a-select :disabled="disabled" style="width:280px" placeholder='请选择证件类型' v-decorator="['certificatesType']">
					 <a-select-option v-for="(itme,index) in list" :key="index" :value="itme.dictKey">
            {{itme.dictValue}}
          </a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item v-bind="formItemLayout" label="证件号码">
					<a-input :disabled="disabled" v-decorator="[ 'certificatesNo']" placeholder='请输入证件号码' />
				</a-form-item>
				<a-divider class="title-divider" />
				<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="身份证正面照片" class="upzjimg">
          <a-form-item class="up_img">
            <a-upload disabled name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Driver_Change">
              <div class="img_zz" v-if="Driver_img">
                <div class="img_zz_text" >
                  <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text" style="margin-top: 10px;">
                    <span style="color: red;"></span>
                  </div>
                </div>
                <div class="img_zz_d"></div>
              </div>
              <img  v-if="Driver_img" :src="Driver_img" alt="avatar" />
              <div class="up_img_d" v-if="!Driver_img">
                <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text" style="margin-top: 10px;">
                   <span style="color: red;"></span>
                </div>
              </div>
            </a-upload>
          </a-form-item>
        </a-form-item>

        <a-divider class="title-divider" />
        <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="身份证背面照片" class="upzjimg">
          <a-form-item class="up_img">
            <a-upload disabled name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="back_Change">
              <div class="img_zz" v-if="back_img">
                <div class="img_zz_text" >
                  <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text" style="margin-top: 10px;">
                    <span style="color: red;"></span>
                  </div>
                </div>
                <div class="img_zz_d"></div>
              </div>
              <img  v-if="Driver_img" :src="back_img" alt="avatar" />
              <div class="up_img_d" v-if="!back_img">
                <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text" style="margin-top: 10px;">
                   <span style="color: red;"></span>
                </div>
              </div>
            </a-upload>
          </a-form-item>
        </a-form-item>

        <a-divider class="title-divider" />
				<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="荣誉/资质图片" class="upzjimg">
          <a-form-item class="up_img">
            <a-upload disabled name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Positive_Change">
              <div class="img_zz" v-if="Positive_img">
                <div class="img_zz_text" >
                  <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text" style="margin-top: 10px;">
                    <span style="color: red;"></span>
                  </div>
                </div>
                <div class="img_zz_d"></div>
              </div>
              <img  v-if="Positive_img" :src="Positive_img" alt="avatar" />
              <div class="up_img_d" v-if="!Positive_img">
                <a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text" style="margin-top: 10px;">
                   <span style="color: red;"></span>
                </div>
              </div>
            </a-upload>
          </a-form-item>
        </a-form-item>
        	<a-divider class="title-divider" />
				<div class="ant-row ant-form-item">
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-20 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<div class="ant-title">
							<span class="title-span" style="margin-left:-50px; font-size:16px; font-weight:700; ">审核意见</span>
						</div>
					   <div class="ant-radio">
							<a-radio-group v-model="value">
								<!-- v-decorator="['mode']" -->
					    <a-radio :value="111">
					    通过
					    </a-radio>
					    <a-radio :value="112">
					    拒绝
					    </a-radio>
			   	 </a-radio-group>
					 </div>
					 <div class="a-textarea">
						 <a-textarea placeholder="审核意见" v-model="authenticationRemarks" style="margin-top: 10px; width: 447px;height:173px;" :rows="4" />
					 </div>
					</div>
				</div>
			</div>
			<div class="ant-row ant-form-item">
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-10 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							
							<a-button type="primary"  html-type="submit" >
								{{datail.attestationStatus==111?'关闭':'提交'}}
							</a-button>
             
						</span>
					</div>
				</div>
			</div>
			</a-form>
		</div>
	</div>
</template>
<script>
	import { environment } from '@/environments/environment'
	import {checkTel, checkTelNum, checkEmail} from 'utils/formValidate'
	export default {
		props:['datail'],
		
		data() {
			return {
				uploadUrl: environment.FileUploadUrl + '/fileupload/upload', // 图片上传地址
				FileUploadUrl2:environment.FileUploadUrl2,
         disabled:true,
         loading:false,
         authenticationRemarks:'',
         value:111,
         list:[],
         Driver_img:'',
         Positive_img:'',
         back_img:'',
         cardPicFace:'',
         cardPicFacePath:'',
         certificatesjpg:'',
         certificatesPath:'',
         cardPicAddrPath:'',
         cardPicAddr:'',

				formItemLayout: {
					labelCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 4
						},
					},
					wrapperCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 20
						},
					},
				},
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		created() {
      this.getType(4)
			if(this.datail){

				let d = this.datail;
			if(d.attestationStatus==111){
          this.value = 112;
        }else{
          this.value = 111;
        }
         this.authenticationRemarks = d.authenticationRemarks;

            if(d.cardPicFacePath){
             this.Driver_img = this.FileUploadUrl2+d.cardPicFacePath+d.cardPicFace
             this.cardPicFacePath = d.cardPicFacePath
             this.cardPicFace = d.cardPicFace
          }

            if(d.certificatesPath){
             this.Positive_img = this.FileUploadUrl2+d.certificatesPath+d.certificatesjpg
             this.certificatesPath = d.certificatesPath
             this.certificatesjpg = d.certificatesjpg
          }
             if(d.cardPicAddrPath){
             this.back_img = this.FileUploadUrl2+d.cardPicAddrPath+d.cardPicAddr
             this.cardPicAddrPath = d.cardPicAddrPath
             this.cardPicAddr = d.cardPicAddr
          }
          

          setTimeout(() => {
          	this.form.setFieldsValue({
            username:d.username,
            mobile:d.mobile,
            nickName:d.nickName,
            certificatesType:parseInt(d.certificatesType),
            certificatesNo:d.certificatesNo,
          })
          }, 0);
			}
		},
		watch: {},

		mounted: function() {

		},
		methods: {
  // 获取字典类型
      getType(type){
        this.$get('/info/commonDict', {
          dictType: type
        }).then((r) => {
          if(type == 3){
            console.log(r)
          }
          switch(type){
            case 4: this.list = r.data.data.rows; break;
          }
        })
      },
    // 附件
      handleChange(info) {
        this.fileList = info.fileList
        if(info.file.status === 'uploading') {
          return
        }
        let arr = []
        if(info.file.status === 'done') {
          this.loading = false
          // 每个货物的多个图片拼成字符串，按,分割
          let urls = [];
          for (var i=0;i<info.fileList.length;i++){
            arr.push({
              name: info.fileList[i].name,
              path: info.fileList[i].url?info.fileList[i].url:info.fileList[i].response.data.certifJpgFile
            })
          }
        }
        this.imgArray = arr;
      },
      Driver_Change(info){
        return false;
        if(info.file.status === 'uploading') {
          this.loading = true
          return
        }
        if(info.file.status === 'done') {
          this.Driver_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
          this.cardPicFace = info.file.response.data.certificatesjpg
          this.cardPicFacePath= info.file.response.data.certificatesPath
          this.loading = false
        }
      },
       // 身份证正面照
      Positive_Change(info){
        return false;
        console.log(info,9889)
        if(info.file.status === 'uploading') {
          this.loading = true
          return
        }
        if(info.file.status === 'done') {
          this.Positive_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
          this.certificatesjpg = info.file.response.data.certificatesjpg//  身份证正面 
          this.certificatesPath = info.file.response.data.certificatesPath// 身份证正面存放目录
          this.loading = false
        }
      },
      back_Change(info){
        return false;
        if(info.file.status === 'uploading') {
          this.loading = true
          return
        }
        if(info.file.status === 'done') {
          this.back_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
          this.cardPicAddr = info.file.response.data.certificatesjpg
          this.cardPicAddrPath= info.file.response.data.certificatesPath
          this.loading = false
        }
      },
            // 上传证件
      beforeUpload(file) {

        const isJPG = file.type === 'image/jpeg' || 'image/png'
        if(!isJPG) {
          this.$message.error('You can only upload JPG file!')
        }
        const isLt2M = file.size / 1024 / 1024 < 2
        if(!isLt2M) {
          this.$message.error('Image must smaller than 2MB!')
        }
        return isJPG && isLt2M
      },
          //认证提交
      handleSubmit(e) {
          if(this.datail.attestationStatus == 111){
          this.$emit('cancel');
          return ;
        }
        
        e.preventDefault();
        this.form.validateFieldsAndScroll((err, values) => {
         
          // values.cardPicFacePath = this.cardPicFacePath
          // values.cardPicFace = this.cardPicFace
          // values.certificatesPath = this.certificatesPath
          // values.certificatesjpg = this.certificatesjpg
          values.authenticationRemarks = this.authenticationRemarks
          values.attestationStatus = this.value
          values.type = 1
         

          if(!err) {

                this.$put('userDetail/updateApprovalUser', [values],true).then((r) => {
                if(r.status == 200){
                  this.$message.success(r.data.message);
                  this.form.resetFields();
                  this.$emit('cancel');
                }else{
                  this.$message.error(r.data.message);
                }
                this.loading = false;
              }).catch((e) => {
                this.loading = false;
              })


            }

        });
      },
		}
	}
</script>

<style lang="less" scoped>
	.matching-tendering {
		.list_tab {
			margin-top: 10px;
		}
	}
</style>